import React, { Component } from 'react'
import { Icon, Avatar, Badge, Menu, Dropdown} from 'antd';
import './hader.less';
export default class HaderItem extends Component {
    constructor(props){
        super(props);
        this.state = {
            collapsed:false
        }
    }
    toggle = () => {
        console.log(this.props)
        this.props.onTigger();
        this.setState({
            collapsed: !this.state.collapsed
        })
    }
  render() {
    const menu = (
        <Menu>
          <Menu.Item>
            {/* <a target="_blank" rel="noopener noreferrer" href="#">设置信息</a> */}
            <div>设置信息</div>
          </Menu.Item>
          <Menu.Item>
            <div>查看权限</div>
          </Menu.Item>
          <Menu.Item>
            <div>退出登录</div>
          </Menu.Item>
        </Menu>
      );
    return (
      <div className='hader-mian'>
        <div>
            <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
            />
        </div>
        <div className="userName">
            <span style={{ marginRight: 24 }}>
            <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
            </span>
            <div>
            <Dropdown overlay={menu}>
                <div className="ant-dropdown-link">
                   SuperAdmin <Icon type="down" />
                </div>
            </Dropdown>
            </div>
        </div>
      </div>
    )
  }
}
